<template>
    <div class="main">
        <!-- 返回按钮 -->
        <div class="top">
           <el-button type="info" @click="fanHui()">返回</el-button> 
        </div>

        <!-- 表单 -->
        <div>
            <el-form ref="form" :model="form">
                <el-form-item>
                    <el-select v-model="form.type" placeholder="请选择...">
                    <el-option label="根目录" value="1"></el-option>
                    <el-option label="一级目录" value="2"></el-option>
                    <el-option label="二级目录" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.type2" placeholder="请选择...">
                    <el-option label="我的通讯录" value="1"></el-option>
                    <el-option label="公司通讯录" value="2"></el-option>
                    <el-option label="共享通讯录" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.type3" placeholder="请选择...">
                    <el-option label="一般" value="1"></el-option>
                    <el-option label="重要" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.sex" placeholder="请选择...">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.name" placeholder="联系人"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.phone" placeholder="手机号码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.phone2" placeholder="公司电话"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.fax" placeholder="传真"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.email" placeholder="Email"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.address" placeholder="地址"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.remarks" placeholder="备注"></el-input>
                </el-form-item>
                <el-form-item>
                    <strong>头像</strong>
                    <el-upload ref="picture" action="#" list-type="picture-card" :auto-upload="false" :http-request="fangFa">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-upload2">上传头像</el-button>
                </el-form-item>
                <el-form-item class="btn3">
                    <el-button type="primary">保存</el-button>
                    <el-button @click="fanHui()">取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"",
components:{},
data(){
    return {
        form:{
            type:'',
            type2:'',
            type3:'',
            sex:'',
            name:'',
            phone:'',
            phone2:'',
            fax:'',
            email:'',
            address:'',
            remarks:'',
            img:''
        }
    }
    },
methods:{
    fanHui(){
        this.$router.go(-1)
    },
    handleRemove(file) {
      console.log(file);
    },

    //el-upload的自定义上传方法
    fangFa(content){
      console.log(content.file);

    //   let formData=new FormData();
    //   formData.append("food_name",this.formAdd.food_name);
    //   formData.append("food_type",this.formAdd.food_type);
    //   formData.append("food_price",this.formAdd.food_price);
    //   formData.append("uploadImg",content.file);
    //   // console.log(formData);
    //   // 发起请求，将formData发送给后端
    //   this.$http({
    //     url:'/api//addFood',
    //     method:"post",
    //     data:formData,
    //     //上传formData数据，需要下面两个参数
    //     ProcessData:false, //processData会默认把data转成字符串，这里值为false是不转。
    //     // contentType:false  //contentType:false自动将contentType的请求头转成 multipart/formData格式。
    //     //注意：不能直接将contentType的请求头值设为multipart/formData，因为axios会自动序列化
    //   }).then((result) => {
    //     console.log(result);
    //     if(result.data.code==200){ 
    //       this.getGreens()
    //       this.dialogFormVisible2 = false;
    //       this.formAdd.food_name='';
    //       this.formAdd.food_type='';
    //       this.formAdd.food_price='';
    //       this.$refs.picture.clearFiles()
    //     }
    //   })
    },
    }
}
</script>
<style lang="less" scoped>
.main{
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.el-select{
    width: 100%;
}
.top{
    border-bottom: 1px solid rgba(161, 158, 158, 0.452);
    padding-bottom:20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.btn3{
    text-align: right;
}
</style>